<template>
	<view class="head">
		<view class="first">
			<u-search placeholder="搜索商品" v-model="keyword" class="searchk"
			actionText="搜索"
			></u-search>
		</view>
		<view class="content">
			<view class="left">
				<view v-for="(item,index) in firstTypeName" class="leftLine" @click="clickSecondContent(index)" :class="index == active ? 'active' : ''">{{item}}</view>
			</view>
			<view class="right">
					<view class="leftPictures">
						<view class="leftContent" v-for="(item,index) in secondList" v-if="index%2==0" @click="lazyContent(item.id)">
							<image :src="item.coverImg" :mode="aspectFit" class="lineImage" ></image>
							<p class="classifyfonts">{{item.secondTypeName}}</p>
						</view>
					</view>
					<view class="rightPictures">
						<view class="rightContent"  v-for="(item,index) in secondList" v-if="index%2!=0" @click="lazyContent(item.id)">
							<image :src="item.coverImg" :mode="aspectFit" class="lineImage"></image>
							<p class="classifyfonts">{{item.secondTypeName}}</p>
						</view>
					</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
			data() {
				return {
					keyword: '',
					firstTypeName:[],
					typeId:[],
					secondList:[
						
					],
					active:0,
					firstIndex:0,
				}
			},
			onLoad(options) {
				var data = JSON.parse(options.firstIndex);
				console.log("获取到的firstIndex"+data);
				this.firstIndex = data;
				this.clickSecondContent(data);
			},
			mounted(){
				
				uni.getStorage(
					{
						key:"firstTypeList",
						success: (res) =>{
							for(var i=0;i<res.data.length;i++){
								this.typeId.push(res.data[i].id);
								this.firstTypeName.push(res.data[i].typeName);
							}
							
							this.firstTypeName[9]="其他";
							
							this.$axios({
								method:'POST',
								url:'/type/getSecondTypeListById',
								params:{
									typeId:this.typeId[this.firstIndex],
								}
							}).then(
								res =>	{
									this.secondList=res.data;
									console.log(res.data,"！！！")
								}
							).catch(
								err	=>	{
									
									console.log(err,"？？？")
								}
							)
							
						}
					}
				);
				// for(var i=0;i<getApp().globalData.firstTypeList.length;i++){
				// 	this.typeId.push(getApp().globalData.firstTypeList[i].id);
				// 	this.firstTypeName.push(getApp().globalData.firstTypeList[i].typeName);
				// }
			},
			methods:{
				clickSecondContent(index){
					console.log(this.typeId[index]);
					this.active=index;
					this.$axios({
						method:'POST',
						url:'/type/getSecondTypeListById',
						params:{
							typeId:this.typeId[index],
						}
					}).then(
						res =>	{
							this.secondList=res.data;
							console.log(res.data,"！！！")
						}
					).catch(
						err	=>	{
							
							console.log(err,"？？？")
						}
					)
				},
				lazyContent(SecondId){
					var secondId=JSON.stringify(SecondId);
					console.log("SecondId",secondId);
					uni.navigateTo({
						url:'/pages/production/secondProduction?SecondId='+secondId
					})
				}
			}
			
		}
</script>

<style lang="scss" scoped>
	.head{
		background-color: #eeeeef;
		width: 100%;
		height: 100upx;
		.first{
			//margin-top: 20upx;
			width: 80%;
			margin-left: 10%;
			display:flex;
			height:100%;
			.searchk{
				align-items:center;
			}
		}
	}
	.content{
		display:flex;
		flex-direction:row;	
		//width:100%;
		font-family:"Hiragino Sans GB","PingFang SC";
		.left{
			width:225upx;
			height:100%;
			background-color: gainsboro;
			.leftLine{
				display:flex;
				width:100%;
				height:125upx;
				//background-color:gray;
				
				border-top:1upx solid rgba($color: #e1e1e1, $alpha: 1.0);
				align-items: center;
				justify-content: center;
			}
			.active {
				color:rgba($color: #564f41, $alpha: 1.0);
				background-color: white;
				font-size: 36upx;
				border-top-left-radius: 26upx;
				border-bottom-left-radius: 26upx;
				text-decoration: underline rgba($color: #ff0000, $alpha: 0.2);
			}
		}
		.right{
			width:525upx;
			height:100%;
			
			.lineImage{
				border:1upx solid rgba($color: #dcdcdc, $alpha: 1.0);
				border-radius: 16%;
				margin-left: 20upx;
				height:200upx;
				width:200upx;
			}
			.classifyfonts{
				margin-top:10upx;
				font-size: 32upx;
				text-align:center;
				
			}
			display:flex;
			flex-direction:row;	
			.leftPictures{
				width:50%;
				height:100%;
				// border:1upx solid rgba($color: #dcdcdc, $alpha: 1.0);
				// background-color: red;
				.leftContent{
					width:90%;
					margin:15upx;
				}
			}
			.rightPictures{
				width:50%;
				height:100%;
				// background-color: green;
				// border:1upx solid rgba($color: #dcdcdc, $alpha: 1.0);
				.rightContent{
					width:100%;
					margin:15upx;
					
				}
			}
			
		}
	}
</style>
